import React, { Component } from 'react'

export default class Header extends Component {
  render() {
    const { list, onDelete } = this.props
    return (
      <section className="main">
        <input id="toggle-all" className="toggle-all" type="checkbox" />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul className="todo-list">
          {list.map((item) => {
            return (
              <li className="completed" key={item.id}>
                <div className="view">
                  <input className="toggle" type="checkbox" checked />
                  <label>{item.title}</label>
                  <button
                    className="destroy"
                    onClick={() => {
                      onDelete(item.id)
                    }}
                  ></button>
                </div>
                <input className="edit" value="Create a TodoMVC template" />
              </li>
            )
          })}
        </ul>
      </section>
    )
  }
}
